﻿<!DOCTYPE html>
<html lang="en">
<head>	
	<title></title>
	<meta charset="utf-8" />
	
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<!-- GOOGLE WEB FONTS -->
	<link rel="stylesheet" href="css/font-awesome.min.css">
	
	<!-- BOOTSTRAP 3.3.7 CSS -->
	<link rel="stylesheet" href="css/bootstrap.min.css" />
	
	<!-- SLICK v1.6.0 CSS -->
	<link rel="stylesheet" href="css/slick-1.6.0/slick.css" />
	
	<link rel="stylesheet" href="css/jquery.fancybox.css" />
	<link rel="stylesheet" href="css/yith-woocommerce-compare/colorbox.css" />
	<link rel="stylesheet" href="css/owl-carousel/owl.carousel.min.css" />
	<link rel="stylesheet" href="css/owl-carousel/owl.theme.default.min.css" />
	<link rel="stylesheet" href="css/js_composer/js_composer.min.css" />
	<link rel="stylesheet" href="css/woocommerce/woocommerce.css" />
	<link rel="stylesheet" href="css/woocommerce/woocommerce-layout.css" />
	<link rel="stylesheet" href="css/woocommerce/woocommerce-smallscreen.css" />
	<link rel="stylesheet" href="css/woocommerce/prettyPhoto.css" />
	<link rel="stylesheet" href="css/yith-woocommerce-wishlist/style.css" />
	
	
	<link rel="stylesheet" href="css/custom.css" />
	<link rel="stylesheet" href="css/app-orange.css" id="theme_color" />
	<link rel="stylesheet" href="" id="rtl" /> 
	<link rel="stylesheet" href="css/app-responsive.css" />
</head>

<body class="product-template-default single single-product woocommerce woocommerce-page">
     

	<div class="body-wrapper theme-clearfix">
		<header id="header" class="header header-style1">
			<div class="header-top clearfix">
				<div class="container">
					<div class="rows">
						<!-- SIDEBAR TOP MENU -->
						<div class="pull-left top1">
							<div class="widget text-2 widget_text pull-left">
								<div class="widget-inner">
									<div class="textwidget">
										<div class="call-us"><span>Call Us Now: </span>0123-444-666654123</div>
									</div>
								</div>
							</div>
						</div>
						
						<div class="wrap-myacc pull-right">
							<div class="sidebar-account pull-left">
								<div class="account-title">My account</div>
                        
								<div id="my-account" class="my-account">
									<div class="widget-1 widget-first widget nav_menu-4 widget_nav_menu">
										<div class="widget-inner">
											<ul id="menu-my-account" class="menu">
												<li class="menu-my-account">
													<a class="item-link" href="my_account.html">
														<span class="menu-title">My Account</span>
													</a>
												</li>
												
												<li class="menu-cart">
													<a class="item-link" href="cart.html">
														<span class="menu-title">Cart</span>
													</a>
												</li>
												
												<li class="menu-checkout">
													<a class="item-link" href="checkout.html">
														<span class="menu-title">Checkout</span>
													</a>
												</li>
												
												<li class="menu-wishlist">
													<a class="item-link" href="#">
														<span class="menu-title">Wishlist</span>
													</a>
												</li>
											</ul>
										</div>
									</div>
									
									<div class="widget-2 widget-last widget sw_top-4 sw_top">
										<div class="widget-inner">
											<div class="top-login">
												<div class="div-logined">
													<ul>
														<li>
															<a href="javascript:void(0);" data-toggle="modal" data-target="#login_form">
																<span>Login</span>
															</a>
															<span class="wg">Welcome Guest</span>
														</li>
													</ul>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							
							<div class="pull-left top2">
								<div class="widget-1 widget-first widget nav_menu-2 widget_nav_menu">
									<div class="widget-inner">
										<ul id="menu-checkout" class="menu">
											<li class="menu-checkout">
												<a class="item-link" href="checkout.html">
													<span class="menu-title">Checkout</span>
												</a>
											</li>
										</ul>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			
			<div class="header-bottom clearfix">
				<div class="container">
					<div class="rows">
						<!-- Primary navbar -->
						<div id="main-menu" class="main-menu">
							<nav id="primary-menu" class="primary-menu">
								<div class="navbar-inner navbar-inverse">
									<div class="resmenu-container">
										<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#ResMenuprimary_menu">
											<span class="sr-only">Categories</span>
											<span class="icon-bar"></span>
											<span class="icon-bar"></span>
											<span class="icon-bar"></span>
										</button>
										
										<div id="ResMenuprimary_menu" class="collapse menu-responsive-wrapper">
											<ul id="menu-primary-menu" class="etrostore_resmenu">
												<li><a href="/homePage">首&nbsp;&nbsp;页</a></li>
												<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
												<li><a href="/user/cartPage">购物车</a></li>
												<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
												<li><a href="/loginPage">登录/注册</a></li>
												<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
												<li><a href="/user/myAccountPage">个人中心</a></li>
												<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
												<li><a href="/aboutUsPage">关于我们</a></li>
											</ul>
										</div>
									</div>
									
									<ul id="menu-primary-menu-1" class="nav nav-pills nav-mega etrostore-mega etrostore-menures">
										<li><a href="/homePage">首&nbsp;&nbsp;页</a></li>
										<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
										<li><a href="/user/cartPage">购物车</a></li>
										<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
										<li><a href="/loginPage">登录/注册</a></li>
										<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
										<li><a href="/user/myAccountPage">个人中心</a></li>
										<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
										<li><a href="/aboutUsPage">关于我们</a></li>
									</ul>
								</div>
							</nav>
						</div>
						<!-- /Primary navbar -->
				  
						<div class="top-form top-form-minicart etrostore-minicart pull-right">
							<div class="top-minicart-icon pull-right">
								<i class="fa fa-shopping-cart"></i>
								<a class="cart-contents" href="cart.html" title="View your shopping cart">
									<span class="minicart-number">2</span>
								</a>
							</div>
						 
							<div class="wrapp-minicart">
								<div class="minicart-padding">
									<div class="number-item">
										There are <span>items</span> in your cart
									</div>
									
									<ul class="minicart-content">
										<li>
											<a href="simple_product.html" class="product-image">
												<img 	width="100" height="100" src="static/images/1903/45-150x150.jpg" class="attachment-100x100 size-100x100 wp-post-image" alt="" 
														srcset="static/images/1903/45-150x150.jpg 150w, static/images/1903/45-300x300.jpg 300w, static/images/1903/45-180x180.jpg 180w, static/images/1903/45.jpg 600w" 
														sizes="(max-width: 100px) 100vw, 100px" />
											</a>
											
											<div class="detail-item">
												<div class="product-details">
													<h4>
														<a class="title-item" href="simple_product.html">Veniam Dolore</a>
													</h4>
													
													<div class="product-price">
														<span class="price">														
															<span class="woocommerce-Price-amount amount">
																<span class="woocommerce-Price-currencySymbol">$</span>190.00
															</span>
														</span>	      
														
														<div class="qty">
															<span class="qty-number">1</span>									
														</div>
													</div>
													
													<div class="product-action clearfix">
														<a href="#" class="btn-remove" title="Remove this item">
															<span class="fa fa-trash-o"></span>
														</a>
														
														<a class="btn-edit" href="cart.html" title="View your shopping cart">
															<span class="fa fa-pencil"></span>
														</a>    
													</div>
												</div>
											</div>
										</li>
									  
										<li>
											<a href="simple_product.html" class="product-image">
												<img	 width="100" height="100" src="static/images/1903/22-150x150.jpg" class="attachment-100x100 size-100x100 wp-post-image" alt="" 
														srcset="static/images/1903/22-150x150.jpg 150w, static/images/1903/22-300x300.jpg 300w, static/images/1903/22-180x180.jpg 180w, static/images/1903/22.jpg 600w" 
														sizes="(max-width: 100px) 100vw, 100px" />
											</a>
											
											<div class="detail-item">
												<div class="product-details">
													<h4>
														<a class="title-item" href="simple_product.html">Cleaner with bag</a>
													</h4>
													
													<div class="product-price">
														<span class="price">
															<span class="woocommerce-Price-amount amount">
																<span class="woocommerce-Price-currencySymbol">$</span>350.00
															</span>
														</span>
														
														<div class="qty">
															<span class="qty-number">1</span>									
														</div>
													</div>
													
													<div class="product-action clearfix">
														<a href="#" class="btn-remove" title="Remove this item">
															<span class="fa fa-trash-o"></span>
														</a>           
														
														<a class="btn-edit" href="cart.html" title="View your shopping cart">
															<span class="fa fa-pencil"></span>
														</a>
													</div>
												</div>
											</div>
										</li>
									</ul>
									
									<div class="cart-checkout">
										<div class="price-total">
											<span class="label-price-total">Total</span>
											
											<span class="price-total-w">
												<span class="price">
													<span class="woocommerce-Price-amount amount">
														<span class="woocommerce-Price-currencySymbol">$</span>540.00
													</span>
												</span>
											</span>			
										</div>
										
										<div class="cart-links clearfix">
											<div class="cart-link">
												<a href="cart.html" title="Cart">View Cart</a>
											</div>
											
											<div class="checkout-link">
												<a href="checkout.html" title="Check Out">Check Out</a>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
				  
						<div class="mid-header pull-right">
							<div class="widget sw_top">
								<span class="stick-sr">
									<i class="fa fa-search" aria-hidden="true"></i>
								</span>
								
								<div class="top-form top-search">
									<div class="topsearch-entry">
										<form role="search" method="get" class="form-search searchform" action="">
											<label class="hide"></label>
											<input type="text" value="" name="s" class="search-query" placeholder="Keyword here..." />
											<button type="submit" class="button-search-pro form-button">Search</button>
										</form>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</header>
		
		<div class="listings-title">
			<div class="container">
				<div class="wrap-title">
					<h1>商品详情</h1>
					<div class="bread">
						<div class="breadcrumbs theme-clearfix">
							<div class="container">
								<ul class="breadcrumb">
									<li><a href="#">首页</a><span class="go-page"></span></li>

									<li class="active"><span>商品详情</span></li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<div class="container">
			<div class="row">
				<div id="contents-detail" class="content col-lg-12 col-md-12 col-sm-12" role="main">
					<div id="container">
						<div id="content" role="main">
							<div class="single-product clearfix">
								<div id="product_div">
									<div id="product-01" class="product type-product status-publish has-post-thumbnail product_cat-accessories product_brand-global-voices first outofstock featured shipping-taxable purchasable product-type-simple">
										<div class="product_detail row">




											<!--										 商品图片展示-->
											<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 clear_xs">
												<div class="slider_img_productd">

													<div>
														<img id="show_coverPic" width="400" height="400">
													</div>
												</div>
											</div>

											<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 clear_xs">
												<div class="content_product_detail">

													<h1 id="show_productName" class="product_title entry-title"></h1>

													<div class="reviews-content">
														<div class="star"></div>
														<a href="#reviews" class="woocommerce-review-link" rel="nofollow"><span class="count"></span> </a>
													</div>

													<div>
														<p class="price">
														<span class="woocommerce-Price-amount amount">￥
															<span id="show_productPrice" class="woocommerce-Price-currencySymbol">
															</span>
														</span>
														</p>
													</div>

													<div class="product-info clearfix">
														<div class="product-stock pull-left out-stock">
															<h5>商品详情：</h5><span id="show_productIntro"></span>
														</div>
													</div>

													<div class="description" itemprop="description">
														已售:&nbsp;<a id="show_saleCount"></a>&nbsp;件
													</div>

													<p  class="stock out-of-stock"> </p>

													<form id="purchaseSubmit" >

														<input type="text" id="product_amount" placeholder="请输入数量">
														<input type="submit" value="立即购买" id="buy_button">
													</form>

													<div >
														商品剩余库存：&nbsp;
														<a id="show_productAmount"></a>
														&nbsp;件
													</div>

												</div>
											</div>
										</div>
									</div>

									<div class="tabs clearfix">
										<div class="tabbable">
											<ul class="nav nav-tabs">
												<li class="description_tab active">
													<a href="#tab-description" data-toggle="tab">详情</a>
												</li>

												<li class="reviews_tab ">
													<a href="#tab-reviews" data-toggle="tab">评价</a>
												</li>
											</ul>

											<div class="clear"></div>

											<div class=" tab-content">
												<div class="tab-pane active" id="tab-description">
													<h2>商品描述</h2>

												</div>

												<div class="tab-pane " id="tab-reviews">
													<div id="reviews">
														<div id="comments">
															<h2>商品评价</h2>
															<p class="woocommerce-noreviews">There are no reviews yet.</p>
														</div>

														<div id="review_form_wrapper">
															<div id="review_form">
																<div id="respond" class="comment-respond">
																	<h3 id="reply-title" class="comment-reply-title">
																		Be the first to review "turkey qui"
																		<small><a rel="nofollow" id="cancel-comment-reply-link" href="#" style="display:none;">Cancel reply</a></small>
																	</h3>

																	<form action="" method="post" id="commentform" class="comment-form">
																		<p class="comment-form-rating">
																			<label for="rating">Your Rating</label>
																			<select name="rating" id="rating">
																				<option value="">Rate ...</option>
																				<option value="5">Perfect</option>
																				<option value="4">Good</option>
																				<option value="3">Average</option>
																				<option value="2">Not that bad</option>
																				<option value="1">Very Poor</option>
																			</select>
																		</p>

																		<p class="comment-form-comment">
																			<label for="comment">Your Review</label>
																			<textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea>
																		</p>

																		<p class="form-submit">
																			<input name="submit" type="submit" id="submit" class="submit" value="Submit">
																		</p>
																	</form>
																</div>
															</div>
														</div>

														<div class="clear"></div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>


								<div id="settlement_div" style="align-content: center">

								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		

	</div>
   


	<script type="text/javascript" src="js/jquery/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery/jquery-migrate.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/jquery/js.cookie.min.js"></script>
	
	<!-- OPEN LIBS JS -->
	<script type="text/javascript" src="js/owl-carousel/owl.carousel.min.js"></script>
	<script type="text/javascript" src="js/slick-1.6.0/slick.min.js"></script>
	
	<script type="text/javascript">
		/* <![CDATA[ */
			var woocommerce_price_slider_params = {"currency_symbol":"$","currency_pos":"left","min_price":"100","max_price":"500"};
			var wc_single_product_params = {"i18n_required_rating_text":"Please select a rating","review_rating_required":"yes"};
		/* ]]> */
	</script>
	
	<script type="text/javascript" src="js/widget.min.js"></script>
	<script type="text/javascript" src="js/mouse.min.js"></script>
	<script type="text/javascript" src="js/slider.min.js"></script>
	<script type="text/javascript" src="js/js_composer/js_composer_front.min.js"></script>
	
	<script type="text/javascript" src="js/yith-woocommerce-compare/jquery.colorbox-min.js"></script>
	<script type="text/javascript" src="js/sw_core/isotope.js"></script>
	<script type="text/javascript" src="js/sw_core/jquery.fancybox.pack.js"></script>
	<script type="text/javascript" src="js/sw_woocommerce/category-ajax.js"></script>
	<script type="text/javascript" src="js/sw_woocommerce/jquery.countdown.min.js"></script>
	<script type="text/javascript" src="js/woocommerce/price-slider.min.js"></script>
	<script type="text/javascript" src="js/woocommerce/single-product.min.js"></script>
	<script type="text/javascript" src="js/woocommerce/prettyPhoto/jquery.prettyPhoto.init.min.js"></script>
	<script type="text/javascript" src="js/woocommerce/prettyPhoto/jquery.prettyPhoto.min.js"></script>
	
	<script type="text/javascript" src="js/plugins.js"></script>
	<script type="text/javascript" src="js/megamenu.min.js"></script>
	<script type="text/javascript" src="js/main.min.js"></script>
   
	<script type="text/javascript">
		var sticky_navigation_offset_top = $("#header .header-bottom").offset().top;
		var sticky_navigation = function(){
									var scroll_top = $(window).scrollTop();
									if (scroll_top > sticky_navigation_offset_top) {
										$("#header .header-bottom").addClass("sticky-menu");
										$("#header .header-bottom").css({ "top":0, "left":0, "right" : 0 });
									} else {
										$("#header .header-bottom").removeClass("sticky-menu");
									}
								};
		sticky_navigation();
		$(window).scroll(function() {
			sticky_navigation();
		});
		
		$(document).ready (function () {
			$( ".show-dropdown" ).each(function(){
				$(this).on("click", function(){
					$(this).toggleClass("show");
					var $element = $(this).parent().find( "> ul" );
					$element.toggle( 300 );
				});
			});
		});
   </script>
   
   <!--[if gte IE 9]><!-->
   <script type="text/javascript">
		var request, b = document.body, c = 'className', cs = 'customize-support', rcs = new RegExp('(^|\\s+)(no-)?'+cs+'(\\s+|$)');
		request = true;
      
      	b[c] = b[c].replace( rcs, ' ' );
      	// The customizer requires postMessage and CORS (if the site is cross domain)
      	b[c] += ( window.postMessage && request ? ' ' : ' no-' ) + cs;
   </script>
   <!--<![endif]-->

	<script>

		$(document).ready(function (){

			//获取当前页面的url
			var url= window.location.href;
			//取url中“productId=”后面的字符串
			var productId = url.match(/productId=(.*)/)[1];

			$.ajax({
				type:"get",
				url:"/detail",
				data:{"productId": productId},

				success: function(data){

					$("#show_productName").text(data.data.productName);
					$("#show_productPrice").text(data.data.productPrice);
					$("#show_productIntro").text(data.data.productIntro);
					$("#show_productAmount").text(data.data.productAmount);
					$("#show_saleCount").text(data.data.saleCount);
					$("#show_coverPic").attr("src", data.data.coverPic);

				}
			});
		})


		//立即购买
		$("#purchaseSubmit").submit(function(){

			//商品id
			var url= window.location.href;
			var productId = url.match(/productId=(.*)/)[1];
			//商品数量，默认为1
			var num =  $("#product_amount").val();


			$.ajax({
				url: "user/buyOne",
				data: {"productId": productId , "num": num},
				type: "post",
				success: function(data){

					$("#settle_product_name").text(data.data.product.productName);
					$("#settle_product_amount").text(data.data.product.productAmount);
					$("#settle_total_price").text(data.data.totalPrice);
					$("#receive_name").text(data.data.defaultAddress.receiveName);
					$("#receive_phone").text(data.data.defaultAddress.receivePhone);
					$("#receive_province").text(data.data.defaultAddress.receiveProvince);
					$("#receive_city").text(data.data.defaultAddress.receiveCity);
					$("#receive_region").text(data.data.defaultAddress.receiveRegion);
					$("#receive_address_detail").text(data.data.defaultAddress.receiveAddressDetail);
					$("#receive_address_id").text(data.data.defaultAddress.addressId)

				}
			})
			return false;
		})

		//加载结算页面到div
		$("#settlement_div").html(''); //加载页面的div先清空
		var bodyContent = $.ajax({
			url: "/settlementPage",//加载html的地址
			global: false,
			type: "GET",
			dataType: "html",
			async: false,
			success: function (msg) {
				$("#settlement_div").html(msg);
				//console.log(msg);
			},
			return: false,
		})

		//向后端传输地址id 创建订单
		function createOrder(){

			var addressId = $("#receive_address_id").text();

			$.ajax({
				url: "/user/createOrder",
				type: "post",
				data:{"addressId": addressId},
				success: function(data){
					alert(data.msg);
					window.location.href="/user/orderPage";

				},
				return: false,
			})

		}

		//控制div显示或隐藏
		$(document).ready(function() {
			$("#settlement_div").hide();
			$("#product_div").show();
			$("#buy_button").click(function () {
				$("#settlement_div").show();
				$("#product_div").hide();
			});
			$("#back_button").click(function (){
				$("#settlement_div").hide();
				$("#product_div").show();
			});

		})

	</script>

   </body>
</html>

